<template>
  <div>
    <!-- 顶部 -->
    <nav class="nav">
      <span class="back" @click="$router.go(-1)">&lt;</span>
      城市列表
    </nav>
    <div class="text">房源信息</div>
    <van-cell-group>
      <van-cell title="小区名称" value="请输入小区名称 >" @click="serch"/>
    </van-cell-group>
    <div class="floorA">
      <van-field
        label="租      金"
        placeholder="请输入租金/月"
        v-model="price"
      />
      <div class="outher">￥/月</div>
    </div>
    <div class="floorA">
      <van-field label="建筑面积" placeholder="请输入建筑面积" />
      <div class="outher">m²</div>
    </div>
    <!-- 1 -->
    <van-field
      readonly
      clickable
      name="picker"
      :value="value"
      label="户  型"
      placeholder="请选择"
      @click="showPicker = true"
      is-link
      label-width="260px"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!-- 2 -->
    <van-field
      readonly
      clickable
      name="pickerTwo"
      :value="valueTwo"
      label="所在楼层"
      placeholder="请选择"
      @click="showPickerTwo = true"
      is-link
      label-width="260px"
    />
    <van-popup v-model="showPickerTwo" position="bottom">
      <van-picker
        show-toolbar
        :columns="second"
        @confirm="onConfirmTwo"
        @cancel="showPickerTwo = false"
      />
    </van-popup>
    <!-- 3 -->
    <van-field
      readonly
      clickable
      name="picker"
      :value="valueThird"
      label="朝向"
      placeholder="请选择"
      @click="showPickerThird = true"
      is-link
      label-width="260px"
    />
    <van-popup v-model="showPickerThird" position="bottom">
      <van-picker
        show-toolbar
        :columns="third"
        @confirm="onConfirmThird"
        @cancel="showPickerThird = false"
      />
    </van-popup>
    <!-- 房屋标题区域 -->
    <div class="content">
      <van-cell-group>
        <van-field label="房屋标题" readonly />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="valueText"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
        />
      </van-cell-group>
    </div>
    <div class="content">
      <van-cell-group>
        <van-field label="房屋图像" readonly />
      </van-cell-group>
      <van-field name="uploader" label="文件上传">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
    </div>
    <div class="content">
      <van-cell-group>
        <van-field label="房屋配置" readonly />
      </van-cell-group>
      <ul class="cardIcon">
        <li v-for="item in List" :key="item.index">
          <van-icon :name="item.split(',')[1]" /> <br />
          {{ item.split(',')[0] }}
        </li>
      </ul>
    </div>
    <div class="content">
      <van-cell-group>
        <van-field label="房屋图像" readonly />
      </van-cell-group>
    </div>
    <van-field
      class="houseInfo"
      v-model="text"
      placeholder="请输入房屋描述"
      size="200px"
      height="220px"
    />
    <footer>
      <van-button size="large" @click="open">取消</van-button>
      <van-button type="info" size="large" @click="submitList">提交</van-button>
    </footer>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  name: 'RentOutDetail',
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  data () {
    return {
      price: '',
      text: '',
      List: [
        '衣柜,chat-o',
        '洗衣机,cart-circle-o',
        '空调,gift-o',
        '天然气,fire-o',
        '冰箱,tv-o',
        '暖气,orders-o',
        '电视,underway-o',
        '热水器,music-o',
        '宽带,gem-o',
        '沙发,map-marked'
      ],

      uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
      valueText: '',
      value: '',
      columns: ['一室', '两室', '三室', '四室', '四室+'],
      showPicker: false,
      valueTwo: '',
      showPickerTwo: false,
      second: ['高楼层', '中楼层', '低楼层'],
      valueThird: '',
      showPickerThird: false,
      third: ['东', '西', '南', '北', '东南', '东北', '西南', '西北']
    }
  },
  methods: {
    submitList(){
      // TODO 提交房源表单
      this.$toast.fail('别想了，还没写')
    },
  // 关键词搜索小区
    serch(){
      this.$router.push('/serch')
    },

    open () {
      Dialog.confirm({
        title: '提示',
        message: '真的放弃发布房源了嘛',
        cancelButtonText: '继续编辑',
        cancelButtonColor: '#db3231',
        confirmButtonText: '放弃',
        confirmButtonColor: '#323233'
      })
        .then(() => {
          // on confirm
          this.$router.push('/homepage')
        })
        .catch(() => {
          // on cancel
        })
    },
    // onClickRight () {
    //   console.log('去另一个页面')
    // },
    onConfirm (value) {
      this.value = value
      this.showPicker = false
    },
    onConfirmTwo (valueTwo) {
      this.valueTwo = valueTwo
      this.showPickerTwo = false
    },
    onConfirmThird (valueThird) {
      this.valueThird = valueThird
      this.showPickerThird = false
    }
  }
}
</script>

<style scoped lang="less">
.nav {
  height: 44px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 44px;
  text-align: center;
  background-color: rgb(33, 185, 122);
  color: #fff;
  .back {
    font-size: 18px;
    position: absolute;
    left: 10px;
    top: 0;
    transform: scale(1, 1.5);
  }
}
.cardIcon {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  background: #fff;
  li {
    margin: 10px 0;
    width: 20%;
    height: 50px;
  }
}
.floorA {
  display: flex;
  // margin: 0 10px;
  width: 100%;
  height: 50px;

  .outher {
    font-size: 15px;
    color: #ccc;
    width: 60px;
    line-height: 50px;
  }
}
.text {
  color: #21b97a;
  background-color: #fff;
  font-size: 15px;
  padding: 15px 0 15px 9px;
  border-bottom: 1px solid #ccc;
}
.houseInfo {
  height: 200px;
  margin-bottom: 20px;
}
footer {
  display: flex;
  position: fixed;
  flex: 1;
  bottom: 0;
  width: 100%;
  z-index: 2;
}
</style>
